<!-- 未使用 -->
<template>
  <div class="bg-image">

    <div>
      <h1>{{ image.title }}</h1>
    </div>

    <div>
      <img class="image" :src="image.imageUrl" :alt="image.title" :title="image.title">
    </div>

  </div>
</template>

<script>
import imageApi from '@/api/image'

export default {

  data() {
    return {
      imageId: '',
      image: {
        id: '',
        title: '',
        imageUrl: '',
        size: 0,
        sort: 0,
      },
    }
  },

  created() {
    if (this.$route.params && this.$route.params.id) {
      this.imageId = this.$route.params.id
    }
    this.getImageInfoById()
  },

  mounted() {
    //this.getImageInfoById()
  },

  methods:{
    getImageInfoById() {
      // 调用根据id查询方法
      imageApi.getImageInfoById(this.imageId)
        .then(response => {
          console.log("===========根据id获取图片===========")
          console.log(response.data.data)
          this.image = response.data.data.image
        })
    }
  }
}
</script>
<style>
h1 {
  font-size:20px
}
.bg-image {
  background: #68CB9B;
  text-align: center;
}

.image {
  width: 50%;
  height: 40%;
  display: inline-block;
}
</style>
